<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center dynamicDetails_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub aboutUs_fd0_0' v-if="type==3">
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  aboutUs_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='aboutUs_fd0_0_c1_c0'>详情</text>
				</view>
				<view class='flex flex-wrap align-center aboutUs_fd0_0_c2'>
				</view>
			</view>
			<view class='flex flex-wrap align-center justify-between flex-sub dynamicDetails_fd0_0' v-else>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  dynamicDetails_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-center flex-sub dynamicDetails_fd0_0_c1'>
					<image class='dynamicDetails_fd0_0_c1_c0' mode="aspectFill" :src='details.head_img'
						@tap.stop="goHomeDetails">
					</image>
					<text class='dynamicDetails_fd0_0_c1_c1'>{{details.user_nickname}}</text>
				</view>
				<button @tap.stop="getReport(1)" class='dynamicDetails_fd0_0_c2_c0' v-if="is_hide == 1">举报</button>
				<view class='flex flex-wrap align-center' style="margin-left: 16rpx;" @tap.stop="getFollow" v-if="(userInfo.id != details.user_id) && !isShow">
					<button class='dynamicDetails_fd0_0_c2_c0' v-if="details.is_follow == 0">关注</button>
					<button class='dynamicDetails_fd0_0_c2_c0' v-else>已关注</button>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<!---flex布局flex布局开始-->
			<view
				class="flex flex-direction flex-wrap align-stretch justify-center benben-flex-layout dynamicDetails_flex_1">
				<view style="position: relative" v-if="details.type == 2">
					<swiper ref="benbenSwiperfd1_0" @change="bannerIndexfd1_0 = $event.detail.current"
						class='flex position-relative dynamicDetails_fd1_0' previous-margin="0rpx" next-margin="0rpx"
						:display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>
						<swiper-item class='flex  dynamicDetails_fd1_0' v-for="(v, k) in details.images" :key="k">
							<image @click="previewImage(k)" class='dynamicDetails_fd1_0' mode="aspectFill" :src='v'>
							</image>
						</swiper-item>
					</swiper>
					<view style="position: absolute"
						class="flex dot flex align-center justify-center dynamicDetails_swiperDotfd1_0">
						<template v-for="(item, index) in (details.images.length)">
							<view :key="index" v-if="bannerIndexfd1_0 == index"
								class="flex dot selected flex align-center justify-center dynamicDetails_swiperDotSelectedfd1_0">
							</view>
							<view :key="index" v-else
								class="flex dot unselected flex align-center justify-center dynamicDetails_swiperDotUnselectedfd1_0">
							</view>
						</template>
					</view>
				</view>
				<view class="video_info" v-if="details.type == 3">
					<view class="" v-if="play_status">
						<video :src="details.video" :autoplay="true" :controls="true" @ended="videoEnd"></video>
					</view>
					<view v-else>
						<image :src="details.video_image" mode="aspectFill"></image>
						<image @tap.stop="playVideo" class="video_btn" :src='STATIC_URL+"63.png"' mode="aspectFill">
						</image>
					</view>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch dynamicDetails_fd1_1'>
					<!-- <text class='dynamicDetails_fd1_1_c0'>华为手环6，保命神器，吊打一切手环</text> -->
					<view class='flex flex-wrap align-center dynamicDetails_fd1_1_c1' v-if="details.content">
						<text class='dynamicDetails_fd1_1_c1_c0'>{{details.content}}</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='dynamicDetails_fd1_1_c2_c0'>编辑于</text>
						<text class='dynamicDetails_fd1_1_c2_c0'>{{details.create_time}}</text>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<!---111111flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout dynamicDetails_flex_2">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class='flex flex-wrap align-center dynamicDetails_fd2_0_c0'>
						<text class='dynamicDetails_fd2_0_c0_c0'>共</text>
						<text class='dynamicDetails_fd2_0_c0_c0'>{{comment_total_nums}}</text>
						<text class='dynamicDetails_fd2_0_c0_c0'>条评论</text>
					</view>
					<view class='flex flex-wrap align-center dynamicDetails_fd2_0_c1'>
						<image class='dynamicDetails_fd2_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
					</view>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch flex-sub dynamicDetails_fd2_1'>
					<view class='flex flex-direction flex-wrap align-stretch dynamicDetails_fd2_1_c0'
						v-for="(v, k) in list" :key="k">
						<view class='flex flex-wrap '>
							<view class='flex flex-wrap align-center'>
								<image class='dynamicDetails_fd2_1_c0_c0_c0_c0' mode="aspectFill"
									:src='v.user_head_img'>
								</image>
							</view>
							<view
								class='flex flex-direction flex-wrap align-stretch flex-sub dynamicDetails_fd2_1_c0_c0_c1'>
								<text class='flex align-center dynamicDetails_fd2_1_c0_c0_c1_c0'>
									<text style="margin-right: 20rpx;">{{v.user_nickname}}</text>
									<!-- <u-icon @click="getReport" name="info-circle" size="28"></u-icon> -->
									<text @click="getReport(2, v.aid)" style="font-size: 24rpx;color: #999;">举报</text>
								</text>
								
							</view>
							<image class='dynamicDetails_fd2_1_c0_c0_c2' mode="aspectFit" :src='STATIC_URL+"26.png"'
								v-if="v.is_likes == 0" @tap.stop="getGiveUp(1, k, '', v.aid)">
							</image>
							<image class='dynamicDetails_fd2_1_c0_c0_c2' mode="aspectFill" :src='STATIC_URL+"77.png"'
								v-else @tap.stop="getGiveUp(1, k, '', v.aid)">
							</image>
							<text class='dynamicDetails_fd2_1_c0_c0_c3'>{{v.likes_total_nums}}</text>
						</view>
						<view class='flex flex-direction flex-wrap align-stretch dynamicDetails_fd2_1_c0_c1'>
							<text class='self-start dynamicDetails_fd2_1_c0_c1_c0'>{{v.content}}</text>
							<view class='flex flex-wrap align-center dynamicDetails_fd2_1_c0_c1_c1'>
								<text class='dynamicDetails_fd2_1_c0_c1_c1_c0'>{{v.create_time}}</text>
								<text class='dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c1_c1' @tap.stop="commentInput(0, k, v.aid, v.user_nickname)">回复</text>
							</view>
							<view class='flex flex-direction flex-wrap align-stretch dynamicDetails_fd2_1_c0_c1_c2'
								v-if="v.isShow">
								<block v-for="(v1, k1) in v.secondList" :key="k1">
									<view class='flex flex-direction flex-wrap align-stretch'>
										<view class='flex flex-wrap align-center'>
											<view class='flex flex-wrap align-center'>
												<image class='dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c0_c0'
													mode="aspectFill" :src='v1.user_head_img'></image>
											</view>
											<view
												class='flex flex-wrap align-center self-center flex-sub dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c1'>
												<text
													class='self-start dynamicDetails_fd2_1_c0_c0_c1_c0'>{{v1.user_nickname}}</text>
												<text class='self-start dynamicDetails_fd2_1_c0_c0_c1_c0'
													v-if="v1.reply_nickname" style="margin-left: 12rpx;">回复：</text>
												<text class='self-start dynamicDetails_fd2_1_c0_c0_c1_c0'
													v-if="v1.reply_nickname">{{v1.reply_nickname}}</text>
												<text @click="getReport(2, v1.aid)" style="font-size: 24rpx;color: #999;margin-left: 20rpx;" >举报</text>
												<!-- <u-icon style="margin-left: 12rpx;" @click="getReport" name="info-circle" size="28"></u-icon> -->
											</view>
											<image class='dynamicDetails_fd2_1_c0_c0_c2' mode="aspectFit"
												:src='STATIC_URL+"26.png"' v-if="v1.is_likes == 0"
												@tap.stop="getGiveUp(2, k, k1, v1.aid)"></image>
											<image class='dynamicDetails_fd2_1_c0_c0_c2' mode="aspectFit"
												@tap.stop="getGiveUp(2, k, k1, v1.aid)" :src='STATIC_URL+"77.png"'
												v-else></image>
											<text class='dynamicDetails_fd2_1_c0_c0_c3'>{{v1.likes_total_nums}}</text>
										</view>
										<view
											class='flex flex-direction flex-wrap align-stretch dynamicDetails_fd2_1_c0_c1_c2_c0_c1'>
											<text class='self-start dynamicDetails_fd2_1_c0_c1_c0'>{{v1.content}}</text>
										</view>
									</view>
									<view class='flex flex-wrap align-center dynamicDetails_fd2_1_c0_c1_c2_c1'>
										<text class='dynamicDetails_fd2_1_c0_c1_c1_c0'>{{v1.create_time}}</text>
										<text class='dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c1_c1' @tap.stop="commentInput(1, k, v1.user_id, v1.user_nickname)">回复</text>
									</view>
								</block>
							</view>
							<view class='flex flex-wrap align-center dynamicDetails_fd2_1_c0_c1_c2_c2'>
								<view v-if="(v.page != v.last_page) && v.child_total_nums > 0"
									@tap.stop="commentMore(k, v.aid)" class="dynamicDetails_fd2_1_c0_c1_c2_c2_c0">展开更多回复
								</view>
								<view
									style="width: 100%;font-size: 24rpx;color: #999;text-align: left;padding-left: 220rpx;"
									v-if="(v.page == v.last_page) && v.isShow" @tap.stop="commentShow(k)">收起</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="last_page > 1" class="loadmore" font-size="24" :status="status" :icon-type="iconType"
					:load-text="loadText" />
			</view>
			<view class="noData_other" v-if="list.length == 0 && !isShow">
				<image src="/static/empty/no.png"></image>
				<view>还没有评论~</view>
			</view>

			<!---111111flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center dynamicDetails_flex_3">
				<input class='dynamicDetails_fd3_0' :placeholder="placeholder" confirm-type="send"
					:focus="focus"
					placeholder-style="color:#999;font-size:28rpx" v-model="fd3_0_c0" @confirm="conformComment" />
				<image class='dynamicDetails_fd3_1' mode="aspectFill" v-if="details.is_likes == 0"
					@tap.stop="getGiveUp(0)" :src='STATIC_URL+"26.png"'></image>
				<image class='dynamicDetails_fd3_1' mode="aspectFill" v-else @tap.stop="getGiveUp(0)"
					:src='STATIC_URL+"77.png"'></image>
				<text class='dynamicDetails_fd3_2'>{{details.likes_num}}</text>
				<image class='dynamicDetails_fd3_1' :src='STATIC_URL+"27.png"'></image>
				<text class='dynamicDetails_fd3_2'>{{details.comment_num}}
				</text>

			</view>
		</block>

		<view :style="{height: '98rpx'}"></view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				"isShow": true,
				"fd3_0_c0": "",
				"placeholder": "说说你的看法…",
				"bannerIndexfd1_0": 0,
				"id": "",  // 发现id
				"details": {
					"images": [],
					"user_id": ''
				},
				"play_status": false,
				"comment_total_nums": 0, // 评论数量
				"pid": "", // 所属主评论id
				"reply_user_id": "", // 被回复人id
				"commentType": 0,
				"secondexIndex": "",
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"type": 1,
				"is_vip": 0,
				"userInfo": {
					"id": ''
				},
				"isSubmit": false,
				"focus": false,
				"is_hide": 0
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				type
			} = options
			if (id !== undefined) this.id = id
			if (type !== undefined) this.type = type
			this.getDetailsInfo();
			this.getComment();
			this.postHide();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getInformation();
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.is_pull = true;
			this.isShow = true;
			this.getComment();
		},
		// 上拉加载
		onReachBottom() {
			if (this.page >= this.last_page) return;
			this.status = 'loading';
			this.page++;
			setTimeout(() => {

				if (this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.is_pull = false;
				this.getComment();
			}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			// 是否隐藏三方  post64fabe4eafefc
			postHide() {
				this.$api.post(global.apiUrls.post64fabe4eafefc, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.is_hide = res.data.data.is_hide;
					}
				})
			},
			getReport(type, id) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/home/report/report?report_type=1' + '&id=' + this.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/report/report?report_type=2' + '&id=' + id
					})
				}
			},
			// 用户资料
			getInformation() {
				this.$api.post(global.API_VERSION + '/64366f0e3b620', {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.is_vip = res.data.data.is_vip;
						this.userInfo = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 跳转个人主页
			goHomeDetails() {
				if (this.userInfo.id == this.details.user_id) {
					uni.switchTab({
						url: '/pages/tabBar/my/my'
					})
				} else {
					// if (this.is_vip == 0) {
					// 	this.$message.info('您还不是会员，请升级会员后查看');
					// 	return;
					// }
					uni.navigateTo({
						url: '/pages/home/homeDetails/homeDetails?id=' + this.details.user_id
					})
				}
			},
			getDetailsInfo() {
				this.$api.post(global.API_VERSION + '/6473224ae8ee0', {
					community_id: this.id
				}).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.details = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 看视频
			playVideo() {
				this.play_status = true;
			},
			videoEnd() {
				this.play_status = false;
			},

			// 主评论列表
			getComment() {
				this.$api.post(global.API_VERSION + '/6473225f2e476', {
					community_id: this.id,
					page: this.page
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.comment_total_nums = res.data.data.comment_total_nums;
						this.last_page = res.data.data.data.last_page;
						if (res.data.data.data.data.length > 0) {
							res.data.data.data.data.forEach((v, k) => {
								v.secondList = [];
								v.page = 1;
								v.isShow = false;
								v.last_page = 0;
							})
						}
						if (this.is_pull) {
							this.list = res.data.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 二级评论列表
			secondComment() {
				if (this.isSubmit) return;
				this.isSubmit = true;
				if (this.list[this.secondexIndex].last_page <= 1) {
					this.list[this.secondexIndex].page = 1;
				} else {
					this.list[this.secondexIndex].page += 1;
				}
				this.$api.post(global.API_VERSION + '/647322774a40f', {
					community_id: this.id,
					community_comment_id: this.pid,
					page: this.list[this.secondexIndex].page
				}).then(res => {
					// console.log(res);
					this.isSubmit = false;
					if (res.data.code == 1) {
						this.list[this.secondexIndex].last_page = res.data.data.last_page;
						this.list[this.secondexIndex].secondList = this.list[this.secondexIndex].secondList.concat(
							res.data.data.data);
						this.list[this.secondexIndex].isShow = true;

					} else {
						this.list[this.secondexIndex].page = this.list[this.secondexIndex].page - 1;
						this.$message.info(res.data.msg);
					}
				})
			},
			// 查看更多二级评论
			commentMore(k, id) {
				this.pid = id;
				this.secondexIndex = k;
				this.secondComment();
			},
			commentShow(index) {
				this.list[this.secondexIndex].isShow = false;
				this.list[this.secondexIndex].secondList = [];
				this.list[this.secondexIndex].page = 1;
				this.list[this.secondexIndex].last_page = 0;
				this.pid = '';
				this.reply_user_id = '';
			},
			// 点赞评论
			getGiveUp(type, index, second_index, course_comment_id) {
				this.$api.post(global.API_VERSION + '/6473228be7192', {
					community_id: this.id,
					community_comment_id: course_comment_id
				}).then(res => {
					this.$message.info(res.data.msg);
					// console.log(res);
					if (res.data.code == 1) {
						if (type == 0) {
							this.getDetailsInfo();
							// 一级评论点赞
						} else if (type == 1) {
							if (res.data.data == 1) {
								this.list[index].is_likes = 1;
								this.list[index].likes_total_nums += 1;
							} else {
								this.list[index].is_likes = 0;
								this.list[index].likes_total_nums = this.list[index].likes_total_nums - 1;
							}
						} else if (type == 2) {
							if (res.data.data == 1) {
								this.list[index].secondList[second_index].is_likes = 1;
								this.list[index].secondList[second_index].likes_total_nums += 1;
							} else {
								this.list[index].secondList[second_index].is_likes = 0;
								this.list[index].secondList[second_index].likes_total_nums = this.list[index]
									.secondList[second_index].likes_total_nums - 1;
							}
						}
					}
				})
			},
			// 评论  post63b688713b350
			commentInput(type, k, id, name) {
				this.focus = true;
				this.commentType = type;
				if (type == 0) {
					this.pid = id; // 回复主评论
				} else {
					this.reply_user_id = id;
				}
				this.placeholder = '回复:' + name;

			},
			// 发表评论
			conformComment() {
				if (!this.fd3_0_c0) {
					this.$message.info('请输入内容');
					return;
				}
				this.$api.post(global.API_VERSION + '/647322c023394', {
					community_id: this.id,
					content: this.fd3_0_c0,
					pid: this.pid,
					reply_user_id: this.reply_user_id
				}).then(res => {
					this.$message.info(res.data.msg);
					this.fd3_0_c0 = '';
					this.placeholder = '说说你的看法…';
					this.focus = false;
					if (this.pid) {
						this.$api.post(global.API_VERSION + '/647322774a40f', {
							community_id: this.id,
							community_comment_id: this.pid,
							page: this.list[this.secondexIndex].page
						}).then(res => {
							console.log(res);
							if (res.data.code == 1) {
								// this.list[this.secondexIndex].secondList = this.list[this.secondexIndex].secondList.concat(res.data.data.data);
								this.list[this.secondexIndex].last_page = res.data.data.last_page;
								this.list[this.secondexIndex].secondList = res.data.data.data;
								this.list[this.secondexIndex].isShow = true;
								this.list[this.secondexIndex].child_total_nums += 1;
							} else {
								this.$message.info(res.data.msg);
							}
						})
					} else {
						this.getComment();
					}
					setTimeout(() => {
						this.pid = '';
						this.reply_user_id = '';
					}, 200)
				})
			},
			// 关注  647322fb760b6
			getFollow() {
				this.$api.post(global.API_VERSION + '/647322fb760b6', {
					user_id: this.details.user_id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.getDetailsInfo();
					}
				})
			},

			// 图片预览
			previewImage(index) {
				let photoList = [];
				photoList = this.details.images;
				uni.previewImage({
					current: index,
					urls: photoList
				})
			},
			
			
			
			
			listenMusic(musicUrl, k) {
				// console.log(k)
				this.closeVideo();
				if (k != undefined) {
			
					this.listen = false
					this.questionData[this.optionIndex].option.forEach((v, k) => {
						v.is_music = false
					})
					this.questionData[this.optionIndex].option[k].is_music = true
					console.log(this.questionData[this.optionIndex].option)
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						if (res) {
							this.$message.info('播放失败，请稍后再试')
						}
						return
					})
					this.$forceUpdate()
					innerAudioContext.onEnded((res) => {
						this.questionData[this.optionIndex].option[k].is_music = false
						this.$forceUpdate()
					})
				} else {
					this.questionData[this.optionIndex].option.forEach((v, k) => {
						v.is_music = false
					})
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						if (res) {
							this.$message.info('播放失败，请稍后再试')
						}
						return
					})
					this.listen = true
				}
				// console.log(k)
				// console.log(musicUrl)
			
			},
			// 题目暂停
			listenMusic2() {
				if (this.listen) {
					innerAudioContext.pause()
					this.listen = false
				} else {
					innerAudioContext.play()
					this.listen = true
				}
				innerAudioContext.onEnded((res) => {
					this.listen = false
				})
			},
			// 选项暂停
			listenMusic3(musicUrl, k) {
				// if ()
				if (this.questionData[this.optionIndex].option[k].is_music) {
					innerAudioContext.pause()
					this.questionData[this.optionIndex].option[k].is_music = false
					this.$forceUpdate()
				} else {
					innerAudioContext.play()
					this.questionData[this.optionIndex].option[k].is_music = true
					this.$forceUpdate()
				}
			},
			// 组合题 题目和选项播放
			listenMusic4(type, musicUrl, k, i) {
				this.closeVideo();
				if (type == 1) {
					this.listen = false
					this.questionData[this.optionIndex].item.forEach((v, k) => {
						v.is_music = false
					})
					this.questionData[this.optionIndex].item[k].is_music = true
					innerAudioContext.stop()
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						if (res) {
							this.$message.info('播放失败，请稍后再试')
						}
						this.questionData[this.optionIndex].item[k].is_music = false
						return
					})
					this.$forceUpdate()
					innerAudioContext.onEnded((res) => {
						this.questionData[this.optionIndex].item[k].is_music = false
						this.$forceUpdate()
					})
					
				} else {
					this.listen = false
					this.questionData[this.optionIndex].item.forEach((v, k) => {
						v.is_music = false
						v.option.forEach((v1, k1) => {
							v1.is_music = false
						})
					})
					this.questionData[this.optionIndex].item[k].option[i].is_music = true
					innerAudioContext.stop()
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						if (res) {
							this.$message.info('播放失败，请稍后再试')
						}
						this.questionData[this.optionIndex].item[k].option[i].is_music = false
						return
					})
					this.$forceUpdate()
					innerAudioContext.onEnded((res) => {
						this.questionData[this.optionIndex].item[k].option[i].is_music = false
						this.$forceUpdate()
					})
				}
				this.item = this.questionData[this.optionIndex];
				this.$set(this.item, this.questionData, this.optionIndex);
				this.$refs.practice.getItem();
			},
			// 组合题 题目和选项暂停
			listenMusic5(type, musicUrl, k, i) {
				if (type == 1) {
					if (this.questionData[this.optionIndex].item[k].is_music) {
						innerAudioContext.pause()
						this.questionData[this.optionIndex].item[k].is_music = false
					} else {
						innerAudioContext.play()
						this.questionData[this.optionIndex].item[k].is_music = true
					}
				} else {
					if (this.questionData[this.optionIndex].item[k].option[i].is_music) {
						innerAudioContext.pause()
						this.questionData[this.optionIndex].item[k].option[i].is_music = false
					} else {
						innerAudioContext.play()
						this.questionData[this.optionIndex].item[k].option[i].is_music = true
					}
				}
				this.item = this.questionData[this.optionIndex];
				this.$set(this.item, this.questionData, this.optionIndex);
				this.$refs.practice.getItem();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto !important;
	}

	.dynamicDetails_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.dynamicDetails_fd0_0_c2_c0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 24rpx;
		color: #fff;
		width: 128rpx;
		height: 56rpx;
		line-height: 56rpx;
	}

	.dynamicDetails_fd0_0_c1_c1 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
		transform: translateY(-4rpx);
	}

	.dynamicDetails_fd0_0_c1_c0 {
		width: 56rpx;
		height: 56rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.dynamicDetails_fd0_0_c1 {
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.dynamicDetails_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.dynamicDetails_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.dynamicDetails_flex_1 {
		background: var(--benbenbgColor0);
		background-size: 100% auto !important;
	}

	.dynamicDetails_fd1_1_c2_c0 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
	}

	.aboutUs_fd0_0_c1_c0 {
		font-size: 34rpx;
		font-weight: 500;
		color: #000000;
		line-height: 88rpx;
	}

	.dynamicDetails_fd1_1_c1_c0 {
		color: #666666;
		font-size: 28rpx;
		font-weight: 400;
	}

	.dynamicDetails_fd1_1_c1 {
		margin: 24rpx 0rpx 36rpx 0rpx;
	}

	.dynamicDetails_fd1_1_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 54rpx;
	}

	.dynamicDetails_fd1_1 {
		padding: 32rpx 32rpx 32rpx 32rpx;
	}

	.aboutUs_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.dynamicDetails_numberfd1_0_c0 {
		background: #d5d5d5;
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 46rpx;
		font-weight: 400;
	}

	.video_info {
		width: 750rpx;
		height: 440rpx;
		position: relative;

		video {
			width: 750rpx;
			height: 440rpx;
		}

		image {
			width: 750rpx;
			height: 440rpx;
		}

		.video_btn {
			width: 72rpx;
			height: 72rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.dynamicDetails_fd1_0 {
		width: 750rpx;
		height: 440rpx;
	}

	.dynamicDetails_swiperDotUnselectedfd1_0 {
		background: var(--benbenbgColor0);
		width: 12rpx;
		height: 12rpx;
		margin: 0rpx 6rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.aboutUs_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		line-height: 88rpx;
	}

	.dynamicDetails_swiperDotSelectedfd1_0 {
		background: #FFFFFF;
		margin: 0rpx 6rpx 0rpx 0rpx;
		font-size: 24rpx;
		color: #fff;
		width: 24rpx;
		height: 12rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	::v-deep .dynamicDetails_swiperDotfd1_0 {
		position: absolute;
		bottom: 8rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.dynamicDetails_flex_2 {
		background: var(--benbenbgColor0);
		margin: 20rpx 0rpx 0rpx 0rpx;
		// background-size: 100% auto !important;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c2_c0 {
		color: #4A98FF;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c2 {
		border-bottom: 1px solid #eee;
		padding: 0rpx 0rpx 16rpx 88rpx;
		margin-top: 16rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c1 {
		padding: 0rpx 0rpx 0rpx 88rpx;
		// margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c0_c1 {
		padding: 8rpx 0rpx 16rpx 88rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c1_c1 {
		font-size: 24rpx;
		color: #999999;
		transform: translateY(-2rpx);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 6rpx 16rpx 6rpx 16rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c1 {
		padding: 0rpx 0rpx 0rpx 16rpx;
		position: relative;
	}

	.dynamicDetails_fd2_1_c0_c1_c2_c0_c0_c0_c0 {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		// margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c2 {
		background: var(--benbenbgColor0);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0rpx 0rpx 0rpx 0rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c1_c0 {
		color: #999999;
		font-size: 24rpx;
		font-weight: 400;
	}

	.dynamicDetails_fd2_1_c0_c1_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
	}

	.dynamicDetails_fd2_1_c0_c1_c0 {
		color: #222222;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.dynamicDetails_fd2_1_c0_c1 {
		padding: 0rpx 0rpx 0rpx 88rpx;
		transform: translateY(-20rpx);
	}

	.dynamicDetails_fd2_1_c0_c0_c3 {
		font-size: 22rpx;
		color: #666666;
		font-weight: 400;
	}

	.dynamicDetails_fd2_1_c0_c0_c2 {
		width: 24rpx;
		height: 24rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 8rpx 0rpx 0rpx;
		transform: translateY(3rpx);
	}

	.dynamicDetails_fd2_1_c0_c0_c1_c1 {
		color: #777777;
		font-size: 20rpx;
		font-weight: 400;
	}

	.dynamicDetails_fd2_1_c0_c0_c1_c0 {
		color: #222222;
		font-size: 28rpx;
		font-weight: 500;
	}

	.dynamicDetails_fd2_1_c0_c0_c1 {
		padding: 0rpx 0rpx 0rpx 16rpx;
	}

	.dynamicDetails_fd2_1_c0_c0_c0_c0 {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.dynamicDetails_fd2_1_c0 {
		margin: 0rpx 24rpx 24rpx 24rpx;
	}

	.dynamicDetails_fd2_1 {
		background: var(--benbenbgColor0);
		background-size: 100% auto !important;
	}

	.dynamicDetails_fd2_0_c1_c0 {
		width: 686rpx;
		height: 80rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx auto 0rpx auto;
	}

	.dynamicDetails_fd2_0_c1 {
		margin: 0rpx 0rpx 48rpx 0rpx;
	}

	.dynamicDetails_fd2_0_c0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.dynamicDetails_fd2_0_c0 {
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.dynamicDetails_flex_3 {
		background: var(--benbenbgColor0);
		width: 750rpx;
		height: 98rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto !important;
	}

	.dynamicDetails_fd3_2 {
		font-size: 22rpx;
		color: #666666;
		font-weight: 400;
	}

	.dynamicDetails_fd3_1 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 8rpx 0rpx 32rpx;
	}

	.dynamicDetails_fd3_0 {
		border: 1px solid #FFFFFF;
		background: #F5F6F8;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		width: 500rpx;
		height: 64rpx;
		padding: 0rpx 0rpx 0rpx 32rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
		font-size: 26rpx;
	}
</style>